<template>
  <view class="content">
    <!-- #ifndef MP-TOUTIAO -->
    <singleHeader :pageTitle="this.$t('newAdmin.data.title')"></singleHeader>
    <!-- #endif -->

    <pageHeader :items="items"></pageHeader>

    <pageSearch :index="index" :tabList="tabList" :is_mch="is_mch" @changeIndex="changeIndex">
      <pageMenu
        ref="menu"
        :index="getMenusData[0]"
        :menu="getMenusData[1]"
        @change="change"
      ></pageMenu>
      <pageBar :params="date_range" :barList="barList" :max="max"></pageBar>

      <pageTable
        v-if="index === '0'"
        :value="getMenusData[0]"
        :tableData="tableData"
      ></pageTable>
      <pageTableList v-else :tableData="tableData"></pageTableList>
    </pageSearch>
  </view>
</template>

<script>
import singleHeader from "@/components/diySystemPage/components/singleHeader/index.vue";
import pageHeader from "./components/page-header.vue";
import pageSearch from "./components/page-search.vue";
import pageTable from "./components/page-table.vue";
import pageTableList from "./components/page-table-list.vue";
import pageMenu from "./components/page-menu.vue";
import pageBar from "./components/page-bar.vue";
import { getYesData, shopData } from "@/api/admin";

export default {
  components: {
    singleHeader,
    pageHeader,
    pageSearch,
    pageTable,
    pageTableList,
    pageMenu,
    pageBar,
  },

  data() {
    return {
	  is_mch:null,
      index: "0", // 0.数据统计 1.商品销售统计

      tabList: [
        { id: "0", name: this.$t("newAdmin.data.dataStatistics") },
        { id: "1", name: this.$t("newAdmin.data.salesStatistics") },
      ],

      barList: [],

      items: [
        { name: "访问次数", num: 0 },
        { name: "访问人数", num: 0 },
        { name: "订单数", num: 0 },
        { name: "支付金额", num: 0 },
      ],

      menuId1: "1",
      menuList1: [
        { name: "访问人数", id: "1" },
        { name: "分享数据", id: "2" },
      ],

      menuId2: "3",
      menuList2: [
        { name: "浏览量", id: "3" },
        { name: "加购人数", id: "4" },
        { name: "支付人数", id: "5" },
        { name: "支付总金额", id: "6" },
      ],
      max: 0,

      date_range: {
        start_date: "", //开始日期
        end_date: "", //结束日期
      },

      tableData: [],
    };
  },

  computed: {
    getMenusData() {
      let arr = [];

      let { index, menuId1, menuId2, menuList1, menuList2 } = this;

      if (index === "0") {
        arr = [menuId1, menuList1];
      } else {
        arr = [menuId2, menuList2];
      }

      return arr;
    },

    getClass() {
      return (id) => {
        return id === this.index ? `on item${id}` : `item${id}`;
      };
    },
  },

  onLoad(option) {
	  if(option.is_mch){
		  this.is_mch=option.is_mch
		  this.index=this.is_mch
	  }
    this.$utils.hideShareMenu();

    getYesData().then((res) => {
      if (res.code) return;
      let { visit, visit_num, order_count, order_price } = res.data,
        { items } = this;

      this.$set(items[0], "num", visit);
      this.$set(items[1], "num", visit_num);
      this.$set(items[2], "num", order_count);
      this.$set(items[3], "num", order_price);
    });
  },

  onShow() {
    this.Emit.$on("handleTime", this.handleTime);
  },

  onHide() {
    this.Emit.$off("handleTime");
  },

  mounted() {},

  methods: {
    changeIndex(index) {
      this.index = index;
      this.clearData();
    },

    handleTime(date_range) {
      let start = new Date(date_range.start_date).getTime(),
        end = new Date(date_range.end_date).getTime();

      if (start > end) {
        this.date_range = {
          start_date: date_range.end_date,
          end_date: date_range.start_date,
        };
      } else {
        this.date_range = date_range;
      }
      this.clearData();
    },

    change(id) {
      let el = "menuId1";
      if (this.index === "1") el = "menuId2";

      this[el] = id;
      this.clearData();
    },

    clearData() {

      let { date_range, index: tab, menuId1, menuId2 } = this;

      shopData({
        ...date_range,
        tab,
        type: tab === "0" ? menuId1 : menuId2,
      },true).then((res) => {

        if (!res.code) {
          this.barList = res.data.data;
          this.tableData = res.data.table_data;
          this.max = Math.max(...this.barList.map((el) => el.value || 0));
          this.$refs.menu.isShow = false;
        }
      });
    },

    changTab(item) {
      if (this.index === item.id) {
        return;
      }

      this.index = item.id;
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  position: relative;
  background: #f8f8f8;
  min-height: 100vh;
  padding: 24rpx 20rpx 150rpx;
}

.tab {
  position: relative;
  display: flex;
  margin-top: 24rpx;
  border-radius: 16rpx 16rpx 0px 0px;
  background: #f2f2f2;
  overflow: hidden;

  .item {
    position: relative;
    width: 50%;
    height: 80rpx;
    line-height: 80rpx;
    color: #8c8c8c;
    font-size: 26rpx;
    text-align: center;

    &.on {
      color: #262626;

      .bg {
        opacity: 1;
      }
    }
  }

  .item1 {
    .bg text {
      left: 100%;
      border-bottom: 90rpx solid #fff;
      border-right: 20rpx solid transparent;
    }
  }

  .item0 {
    .bg text {
      right: 100%;
      border-bottom: 90rpx solid #fff;
      border-left: 20rpx solid transparent;
    }
  }

  .name {
    position: relative;
    z-index: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 90rpx;
    background: #fff;
    border-radius: 16rpx 16rpx 0 0;
    opacity: 0;
    -webkit-transition: 0.3s all;
    transition: 0.3s all;

    text {
      position: absolute;
      bottom: 0;
    }
  }
}
</style>
